<ion-header>
  <ion-toolbar>
      <ion-buttons slot="start" (click)="gotohome()">
          <ion-icon name="arrow-back"></ion-icon>
      </ion-buttons>
    <ion-title>alert</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
    <h3>属性</h3>
    <div>
        <ion-button block (click)="presentAlert()">actionsheet</ion-button>
    </div>
    <div>
        <p>animated:false (关闭弹窗动画)</p>
        <ion-button block (click)="presentAlerta()">actionsheet</ion-button>
    </div>
    <div>
        <p>backdropDismiss:false (取消点击背景关闭弹窗)</p>
        <ion-button block (click)="presentAlertb()">actionsheet</ion-button>
    </div>
    <div>
        <p>buttons (定义按钮)</p>
        <ion-button block (click)="presentAlertc()">actionsheet</ion-button>
    </div>
    <div>
        <p>enterAnimation  leaveAnimation (自定义弹入弹出层动画)</p>
        <ion-button block (click)="presentAlertd()">actionsheet</ion-button>
    </div>
    <div>
        <p>header (自定义标题)</p>
        <ion-button block (click)="presentAlerte()">actionsheet</ion-button>
    </div>
    <div>
        <p>inputs (弹出层中显示input框)</p>
        <ion-button block (click)="presentAlertf()">actionsheet</ion-button>
    </div>
    <div>
        <p>keyboardClose:true (如果为true，则在弹窗时关闭虚拟键盘)</p>
        <ion-button block (click)="presentAlertg()">actionsheet</ion-button>
    </div>
    <div>
        <p>message (弹窗中显示的主体信息)</p>
        <ion-button block (click)="presentAlerth()">actionsheet</ion-button>
    </div>
    <div>
        <p>mode (选择ios或安卓风格)</p>
        <ion-button block (click)="presentAlerti()">actionsheet</ion-button>
    </div>
    <div>
        <p>translucent:true (如果为true，则呈现半透明状态)</p>
        <ion-button block (click)="presentAlertj()">actionsheet</ion-button>
    </div>
    <h3>事件周期</h3>
    <div>
      <p>事件周期一共有4个（ionAlertDidDismiss,  ionAlertDidPresent,  ionAlertWillDismiss,  ionAlertWillPresent）</p>
      <ion-button block (click)="presentAlertk()">actionsheet</ion-button>
    </div>
    <h3>CSS</h3>
  <div>
     <p>--background</p>
     <p>--height</p>
     <p>--max-height</p>
     <p>--max-width</p>
     <p>--min-height</p>
     <p>--min-width</p>
     <p>--width</p>
  </div>
  <ion-button block (click)="presentAlertl()">actionsheet</ion-button>
</ion-content>
